<template>
    <div id="beginner-guidance" :class="`bg-${index}`">
        <!-- <div v-if="index===0" class="start-container flex-center">
            <div class="start-content align-start">
                <img class="logo" :src="logo" alt="">
                <div class="title">美丽科学教学平台</div>
                <div class="content s-16">{{appdes}}</div>
                <div class="bottom-des s-16">下面我将带您一起熟悉平台的基本操作。</div>
            </div>
        </div>
        <img v-if="index!==0" :src="src" alt=""> -->
        <!-- <div class="guidance-handle"> -->
        <!-- <div class="index s-16" v-if="index!==0">{{`${index} / 6`}}</div> -->
        <div v-if="index===4" :class="['pointer','start','s-20',`step${index}`]" @click="accomplish" >我已了解，开始使用</div>
        <div v-else :class="['pointer','start','s-20',`step${index}`]" style="margin:0 auto" @click="next">
            {{index===0?'开始':'下一步'}}</div>
        <!-- <div v-else style="width:100%;" class="flex-center"> -->
        <!-- <div class="pointer start s-16" @click="pre">上一条</div> -->
        <!-- <div class="pointer start s-16" v-if="index!==6" style="margin-left:20px" @click="next">下一条</div> -->
        <!-- <div class="pointer start s-16" v-if="index===6" style="margin-left:20px" @click="accomplish">完成</div> -->
        <!-- </div> -->
        <!-- </div> -->
        <img src="./img/o-user.png" alt="" v-if="index===1" class="ouser" @click="accomplish">
    </div>
</template>

<script>
import { SqlLib } from '../../../../../../static/lib/sqlite/SqlLib';
import { SqlLibUser } from '../../../../../../static/lib/sqlite/service/SqlLibUser';
export default {
    props: ['isShowBeginnerGudiance'],
    data () {
        return {
            index: 0,
        }
    },
    methods: {
        pre () {
            if (this.index === 0) return
            --this.index
        },
        next () {
            if (this.index >= 6) return
            ++this.index
        },
        accomplish () {
            let sqlib = new SqlLib(window.$DBDIR)
            let user = SqlLibUser.queryCurrentUser(sqlib)
            user.reverse1 = 1
            sqlib.updateObjectById(user)
            this.$emit('update:isShowBeginnerGudiance', false)
        }
    }
}
</script>

<style lang="scss">
#beginner-guidance {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background-size: 100% 100%;
    .start {
        min-width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #feb012;
        border-radius: 8px;
        color: #fff;
        display: inline-block;
        padding: 0 15px;
    }
    .step0 {
        position: absolute;
        bottom: 190px;
        right: 50%;
        left: 50%;
        transform: translateX(-50%);
    }
    .step1 {
        position: absolute;
        top: 200px;
        left: 687px;
    }
    .step2 {
        position: absolute;
        top: 152px;
        right: 255px;
    }
    .step3 {
        position: absolute;
        top: 540px;
        left: 631px;
    }
    .step4 {
        position: absolute;
        top: 520px;
        right: 236px;
    }
}
.ouser {
    width: 223px;
    height: 52px;
    position: absolute;
    top: 87px;
    right: 62px;
}
.bg-0 {
    background-image: url("./img/step0.png");
}
.bg-1 {
    background-image: url("./img/step1.png");
}
.bg-2 {
    background-image: url("./img/step2.png");
}
.bg-3 {
    background-image: url("./img/step3.png");
}
.bg-4 {
    background-image: url("./img/step4.png");
}
</style>